/* eslint-disable no-debugger */
<template>
  <div class="mapview">
    <div class="opreation">
       <el-upload
          action=""
          accept="shp"
          :auto-upload=false
          :show-file-list=false
          :on-change="bind"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-button style="margin-top: 10px;" size="small" type="success" @click="show">展示图形</el-button>
        <hr>
        <el-button style="margin-top: 10px;" size="small" type="primary" @click="showGeometryData" title="此按钮展示入库数据格式">数据展示</el-button>

    </div>
    <div class="map-container">
      <MapComponent :geometry="geometry" :geometryData="tempGepmetryData" @getgeometryData="getgeometryData" @mark="mark" />
    </div>
  </div>
</template>
<script>
import MapComponent from '../components/MapComponent'
 import { open } from 'shapefile'
export default {
  name: 'MapView',
  components: {
    MapComponent
  },
  data(){
    return{
      file: null,
      geometry: [], // 图形上传数据
      geometryData: '', // 入库数据
      tempGepmetryData: [] // 入库数据展示临时字段
    }
  },
  methods: {
    mark ({x, y}) {
      console.log(x, y);
    },
    show() { // shape文件上传
      let self = this;
      if (this.file) {
        const name=this.file.name
        const extension=name.split('.')[1]
        //console.log(extension)
        if('shp'!==extension){
          this.$alert('文件不是shp文件！请重新选择文件', {
            confirmButtonText: '确定'
          })
        }else {
          const reader=new FileReader()
          const  fileData=this.file.raw
          reader.readAsArrayBuffer(fileData)
          reader.onload = function(){
            open(this.result)
            .then(source => source.read()
                .then(function log(result) {
                    if (result.done) return;
                    // eslint-disable-next-line no-debugger
                    self.geometry = result.value.geometry.coordinates;
                    console.log(result.value);
                    return source.read().then(log);
                }))
            .catch(error => console.error(error.stack));
          }
        }
      }
    },
    bind(files, fileList){
        //绑定文件
        this.file=fileList[fileList.length - 1];
        console.log(121211);
    },
    getgeometryData (data) {
      this.geometryData = data;
    },
    showGeometryData () {
      this.tempGepmetryData = JSON.parse(this.geometryData);
    }
  },
}
</script>
<style scoped>
  .upload {
    display: flex;
    border: 1px solid red;
    margin-bottom: 10px;
  }
  .mapview {
    height: 100%;
    display: flex;
  }
  .opreation {
    padding: 5px;
  }
  .map-container {
    flex: 1;
  }
</style>